<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">

<style type="text/css">
	.info-box-content {
		padding: 5px 10px;
		margin-left: 90px;
	}
	.info-box-number {
		display: block;
		font-weight: bold;
		font-size: 18px;
		margin-top: 15px;
	}
	.info-box-text {
		text-transform: uppercase;
	}
	.ibox , .ibox-content {
		border: 0px !important ;
	}
	.info-box {
		display: block;
		min-height: 90px;
		background: #fff;
		width: 100%;
		box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.1) ; 
		border-radius: 2px;
		margin-bottom: 15px;
	}
	.bg-red{
		background-color: #dd4b39 !important;
	}
	.bg-aqua{
		background-color: #00c0ef !important ; 
	}
	.bg-yellow{
		background-color: #f39c12 !important ; 
	}
	span.info-box-icon {
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 2px;
		display: block;
		float: left;
		height: 90px;
		width: 90px;
		text-align: center;
		font-size: 45px;
		line-height: 90px;
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            
        	<div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-desktop"></i> 服务统计</h4>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-red"><i class="fab fa-google-plus-g"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">个人通知</span>
                                        <span class="info-box-number">12,821 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-aqua"><i class="fas fa-paper-plane"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">访问日志</span>
                                        <span class="info-box-number">41,410 个</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>

                            <div class="col-md-4 col-sm-6 col-xs-12">
                                <div class="info-box">
                                    <span class="info-box-icon bg-yellow"><i class="fab fa-docker"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">个人通知</span>
                                        <span class="info-box-number">7 条</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>
                                <!-- /.info-box -->
                            </div>
                        </div>
                       	
                       	<h4>工作日历</h4> 
                        <div class="list-group">
						  <a href="#" class="list-group-item active">
						  	18-10 12:45 【部署服务】部署业务组件失败
						  </a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">42</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a>
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a>
						</div>

                    </div>
                </div>
            </div>
        	<div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-leaf"></i> 通知公告</h4>
                    </div>
                    <div class="ibox-content" style="
    margin-top: 0px;
    padding-top: 0px;
">
                    	<div class="list-group">
						  <a href="#" class="list-group-item active">
						  	18-10 12:45 【部署服务】部署业务组件失败
						  </a>
						  
    <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">42</span></a><a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">42</span></a>
						  
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a><a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">5</span></a>
						  
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a><a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">4</span></a>
						  
						  <a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a><a href="#" class="list-group-item">18-10 12:45 【部署服务】部署服务成功 <span class="badge">12</span></a>
						</div>
                    </div>
                </div>
            </div> 	
           
        </div>
		<div class="col-sm-12 select-table table-striped">
			<form id="ordinary-form" style="margin-bottom:15px">
				<div class="select-list">
					<ul>
						<li>
							用户名称：<input type="text" name="userName"/>
						</li>
						<li>
							<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
						</li>
					</ul>
				</div>
			</form>
			<table  id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
    </div>

	<footer th:replace="dashboard/footer :: footer"></footer>
    <script th:src="@{/asserts/ajax/libs/report/echarts/echarts-all.js}"></script>

    <script type="text/javascript">

            var prefix = ctx + "demo.json";

            $(function() {
                var options = {
                    id: "bootstrap-table",
                    url: ctx+ 'platform/montor/datatables',
                    showFooter: false ,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns:  false ,
                    columns: [
					{
						field: 'no',
						title: '序号',
						sortable: true,
						align: "center",
						width: 40,
						formatter: function (value, row, index) {
							return index + 1 ;
						}
					} ,
					{field: 'applicationIcons', title: '图标' , width:'60px',  align: 'center',  formatter: function(value, row, index) {
							var actions = [];
							actions.push('<img src="'+value+'" class="project-icons-list" aria-hidden="true"></i>');
							return actions.join('');
					  }
					},
                    {
                        field : 'applicationName',
                        align: 'left',
                        title : '应用名称'
                    },
                    {
                        field : 'hasDelete',
                        align: 'center',
                        title : '运行时间'
                    },
                    {
                        field : 'hasDelete',
                        align: 'center',
                        title : '重启次数'
                    },
                    {
                        field : 'hasDelete',
                        align: 'center',
                        title : '运行内存'
                    },
                    {
                        field : 'hasDelete',
                        align: 'center',
                        title : '使用CPU'
                    },
                    {
                        field : 'hasDelete',
                        align: 'center',
                        title : '部署实例'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="far fa-trash-alt"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
                };
                $.table.init(options);

                var optionsList = {
                    id: "bootstrap-table-list",
                    url: 'http://pages.linesno.com/demo/table/list',
                    showFooter: false ,
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    columns: [{
                        checkbox: true
                    },
                    {
                        field : 'userId',
                        title : '用户ID'
                    },
                    {
                        field : 'userCode',
                        title : '用户编号'
                    },
                    {
                        field : 'userName',
                        title : '用户姓名'
                    },
                    {
                        field : 'userPhone',
                        title : '用户手机'
                    },
                    {
                        field : 'userEmail',
                        title : '用户邮箱'
                    },
                    {
                        field: 'status',
                        title: '用户状态',
                        formatter: function(value, row, index) {
                            return $.table.selectDictLabel(datas, value);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="far fa-trash-alt"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
                };
                $.table.init(optionsList);
            });
    </script>

</body>
</html>

